<template>
  <!-- 三级联动 -->
  <!-- 上部导航栏 开始 -->
  <nav class="nav">
    <div class="w">
      <div class="dropdown fl" @mouseenter="showEnter" @mouseleave="showLeave">

        <div class="dt">
          <h4>全部商品分类</h4>
        </div>

        <!-- vue 过渡 -->
        <transition name="sort" appear>
          <div class="sort dd" v-show="show">
            <!-- 利用 事件委派+编程式导航实现路由的跳转 与传递参数 -->
            <div class="all-sort-list2" @click="getSearch">
              <div class="item" v-for="(category1) in categoryList" :key="category1.categoryId">
                <h3>
                  <a :data-categoryName="category1.categoryName"
                    :data-category1Id="category1.categoryId">{{ category1.categoryName }}</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore" v-for="(category2) in category1.categoryChild" :key="category2.categoryId">
                      <dt>
                        <a :data-categoryName="category2.categoryName"
                          :data-category2Id="category2.categoryId">{{ category2.categoryName }}</a>
                      </dt>
                      <dd>
                        <em v-for="(category3) in category2.categoryChild " :key="category3.categoryId">
                          <a :data-categoryName="category3.categoryName"
                            :data-category3Id="category3.categoryId">{{ category3.categoryName }}</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <div class="classifyRight">
        <ul>
          <li><a href="#">服装城</a></li>
          <li><a href="#">美妆馆</a></li>
          <li><a href="#">传智超市</a></li>
          <li><a href="#">全球购</a></li>
          <li><a href="#">闪购</a></li>
          <li><a href="#">团购</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">有趣</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <!-- 上部导航栏 结束 -->
</template>

<script>
import { mapState } from 'vuex';

// 用js实现鼠标滑过出现的效果时 可以引入lodash 实现节流操作

export default {
  name: 'TypeNavIndex',
  data() {
    return {
      show: false,

    }
  },
  computed: {
    // 辅助函数mapState接受
    ...mapState({
      // 这里的state 是整个大的仓库。
      categoryList: function (state) {
        return state.home.categoryList;
      }
    })
  },
  mounted() {
    //不能放在此处，会重复访问接口 放到App
    // 向仓库申请获取数据  ，
    // this.$store.dispatch('categoryList');

    if (this.$route.path == '/home') {
      this.show = true
    }
  },
  methods: {
    getSearch(e) {
      // 单击一下获取元素
      let element = e.target;
      // dataset获取节点的自定义属性或者属性值 categoryname 为点击a标签的属性值，比如手机，家用电器等
      // category1id 为 一级categoryId
      let { categoryname, category1id, category2id, category3id } = element.dataset;
      // 如果标签身上有自定义属性categoryName，则一个是a 标签
      if (categoryname) {
        // 整理路由跳转的参数
        let location = { name: "listName" };
        let query = { categoryName: categoryname };
        // 增加params 
        if (this.$route.params) location.params = this.$route.params

        if (category1id) {
          query.category1Id = category1id;
        }
        if (category2id) {
          query.category2Id = category2id;
        }
        if (category3id)
          query.category3Id = category3id;

        // 整理完参数
        location.query = query;

        // 路由跳转 location.name = search;    location.query = 手机/1 ;
        this.$router.push(location)
      }

    },

    // 在list中鼠标滑过“全部商品分类”时，出现下拉列表
    showEnter() {
      this.show = true
    },
    showLeave() {
      if (this.$route.path != '/home') {
        this.show = false
      }

    }

  }
}
</script>

<style scoped lang="css">
/* vue 过渡 */
.sort-enter,
.sort-leave-to {
  height: 0;
}

.sort-enter-to,
.sort-leave {
  height: 461px;
}


.all-sort {
  cursor: pointer;
}

.sort {
  /* display: none; */
  transition: 0.1s linear;
  /* 这里加上之后过渡才有效果 */
  width: 210px;
  height: 461px;
  position: absolute;
  background: #c81623;
  z-index: 999;
}

.sort .all-sort-list2 {
  position: relative;
  border-top: 0;
  z-index: 9999;
  letter-spacing: 0;
  font-family: "Microsoft Yahei";
}

.sort .all-sort-list2 .item:hover .item-list {
  display: block;
}

.sort .all-sort-list2 .item h3 {
  line-height: 30px;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  padding: 0 20px;
  margin: 0;
}

.sort .all-sort-list2 .item h3 a {
  color: white;
}

.sort .all-sort-list2 :hover h3 {
  position: relative;
  z-index: 13;
  background: #f7f7f7;
}

.sort .all-sort-list2 :hover h3 a {
  color: #c81623;
}

.sort .all-sort-list2 .item a {
  color: #555;
  text-decoration: none;
}

.sort .all-sort-list2 .item-list {
  display: none;
  position: absolute;
  width: 734px;
  min-height: 460px;
  _height: 200px;
  background: #f7f7f7;
  left: 210px;
  border: 1px solid #ddd;
  top: 0;
  z-index: 9999 !important;
}

.item-list .subitem {
  float: left;
  width: 650px;
  padding: 0 4px 0 8px;
}

.item-list .subitem dl {
  border-top: 1px solid #eee;
  padding: 6px 0;
  overflow: hidden;
  zoom: 1;
}

.item-list .subitem .fore {
  border-top: 0;
}

.item-list .subitem dt {
  float: left;
  width: 54px;
  line-height: 22px;
  text-align: right;
  padding: 3px 6px 0 0;
  font-weight: 700;
}

.item .item-list .subitem a {
  font-size: 12px;
}

.item-list .subitem dd {
  float: left;
  width: 415px;
  padding: 3px 0 0;
  overflow: hidden;
}

.item-list .subitem dd em {
  float: left;
  height: 14px;
  line-height: 10px;
  padding: 0 8px;
  margin-top: 5px;
  border-left: 1px solid #ccc;
}

.item-list .subitem dd em a,
.item-list .cat-right dd a {
  color: #666;
  text-decoration: none;
}

.item-list .subitem dd em a:hover,
.item-list .cat-right dd a:hover {
  font-weight: 400;
  text-decoration: underline;
}
</style>